<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>媒体特性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            background-color: gray;
            height: 400px;
            line-height: 400px;
            text-align: center;
            font-size: 100px;
            color: black;
            margin: 0 auto;
        }

        /*(0,768]超小屏幕,(768,992]中等屏幕,(992,1200]大屏幕,(1200,max)超大屏幕, 阈值并非绝对 */
        @media screen and (max-width: 768px) {
            h1 {
                color: red
            }
        }
        @media screen and (min-width: 769px) and (max-width:992px)  {
            h1 {
                color: green;
            }
        }
        @media screen and (min-width: 993px) and (max-width:1200px)  {
            h1 {
                color: orange;
            }
        }
        @media screen and (min-width: 1201px)  {
            h1 {
                color: blue;
            }
        }
    </style>
</head>
<body>
<h1>你好啊</h1>
</body>
</html>